import React, { useState, useEffect } from 'react'
import { message } from 'antd';
import { useNavigate,useLocation  } from 'react-router-dom';  

import './serch.scss'

export default function Serch() {

  const navigate = useNavigate();  

  const [searchValue, setsearchValue] = useState('')
  const [data, setData] = useState([1, 2, 3])

  const serachange = (e) => {
    setsearchValue(e.target.value)
  }

  const keychange = (e) => {
    let newdata=[...data]
    if(e.keyCode===13){
      let value =e.target.value
      let index =newdata.findIndex(item=>item===Number(value))
      if(value===''|| value===0){
        message.open({
          type: 'warning',
          content: '请输入内容',
        });
      }else{
        if(newdata.length>=5){
          if(index===-1){
            newdata.unshift(Number(value))
            newdata.pop()
          setData(newdata)
          setsearchValue('')
          }else{
             newdata.unshift(Number(value))
             console.log(newdata);
             let set =new Set(newdata)
             setData(Array.from(set))
             setsearchValue('')
          }
        }else{
          newdata.unshift(Number(value))
          let set =new Set(newdata)
          setData(Array.from(set))
          setsearchValue('')
        }
      }
     }
  }

  const searClick=(item)=>{
    console.log(item);
    let obj ={
      id:1,
      name:'牛牛牛',
      age:15
    }
    navigate('/home',{state:obj})
  }

  return (
    <div id='serchBox'>
      <div className='title'>
        <input type="text" value={searchValue} onKeyDown={(e) => keychange(e)} onChange={(e) => serachange(e)} />
      </div>
      <div className='center'>
        {
          data.map((item, i) => {
            return <li key={i} onClick={()=>searClick(item)}>{item}</li>
          })
        }
      </div>
    </div>
  )
}
